import styled from 'styled-components'

const Serchdiv = styled.div`
    height:0.5rem;
    display:flex;
    align-items:center;
    background:#fff;
    margin-bottom:0.1rem;
    div:first-child{
        display:flex;
        width: 2.63rem;
        background: #EAEAEA;
        border-radius: .15rem;
        margin-left:0.15rem;
        padding:0.02rem 0.15rem;
        line-height:0.26rem;
        overflow:hidden;
        input{
            height:0.26rem;
            flex:1;
            border:none;
            background: #EAEAEA;
            font-size:0.14rem;
        }
        input::placeholder{
            text-align:center;
        }
        >span{
            font-size:0.16rem;
        }
    }
    div:last-child{
        font-size: 0.12rem;
        font-weight: 500;
        color: #308BFE;
        margin-left:0.18rem;
    }
`

const Navdiv = styled.div`
    display:flex;
    justify-content:space-around;
    align-items:center;
    background:#fff;
    height:0.5rem;
    border-bottom:1px solid #DCDCDC;
    div{
        color:#333;
        font-size:0.14rem;
        line-height:0.14rem;
    }
    span{
        font-size:0.18rem;
        margin-left:0.06rem;
    }
`


const Ulcon= styled.ul`
    flex:1;
    overflow-y:scroll;
    display:flex;
    flex-wrap:wrap;
    background:#fff;
    padding:0.1rem 0.1rem 0.2rem;
    /* box-sizing:border-box; */
    li{
        width:calc((100% - 0.28rem)/3);
        position:relative;
        div{
            height:1.5rem;
            width:100%;
            img{
                width:100%;
                height:100%;
            }
        }
        p:nth-of-type(1){
            font-size: 0.14rem;
            font-weight: 500;
            color: #333333;
            margin:0.1rem 0 0.05rem;
        }
        p:nth-of-type(2){
            font-size: 0.14rem;
            font-weight: 500;
            color: #666666;
            margin-bottom:0.21rem;
        }
        strong{
            position:absolute;
            top:0;
            right:0;
            color:#fff;
            display:block;
            background:#F66B1A;
            font-size:0.12rem;
            padding:0.01rem 0.06rem;
            border-radius:0.12rem;
        }
        h3{
            margin-bottom:0.16rem;
            span{
                width:0.6rem;
                display:inline-block;
                border:1px solid #308BFE;
                padding:0.03rem 0.13rem;
                text-align:center;
                font-size:0.14rem;
                line-height:0.14rem;
                border-radius:0.15rem;
                color: #308BFE;
            }
            em{
                width:0.6rem;
                background:#308BFE;
                padding:0.03rem 0.13rem;
                font-size:0.14rem;
                line-height:0.14rem;
                border-radius:0.15rem;
                color:#fff;
                border:1px solid #fff;
                text-align:center;

            }
        }
    }
    li:nth-child(3n-1){
        margin: 0 0.14rem;
    }
`


const FlexCon = styled.div`
    height:100%;
    display:flex;
    flex-direction:column;
`

const Nomore = styled.h4`
    height:1.1rem;
    width:100%;
    font-size:0.16rem;
    color:#999;
    line-height:1.4rem;
    text-align:center;
`

export {
    Serchdiv,
    Navdiv,
    Ulcon,
    FlexCon,
    Nomore
}